<template>
  <div class="post">
    <Header></Header>
    <div class="content">
      <div class="content_wrapper" v-if="lists.length === 0" style="text-align: center; padding-top: 100px;">
        <img src="./../assets/images/nothing.png" alt="">
        <p style="padding-top: 50px;">暂无内容</p>
      </div>
      <div class="content_wrapper" v-else>
        <div v-for="(li, liIndex) in lists" :key="liIndex">
          <router-link :to="{name: 'Post', params: {id: li.id}}">
          <div class="title">
            {{ li.title.rendered }}
          </div>
          </router-link>
        </div>
        <div class="pagination">
          <button class="button" :disabled="current === 1">上一页</button>
          <button class="button" :disabled="current < 10">下一页</button>
        </div>
      </div>
    </div>
    </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'
import Header from '@/components/header/index.vue'
import request from './../request'

@Component({
  components: { Header }
})
export default class List extends Vue {
  id: number
  current: number = 1
  lists: any[] = []

  created() {
    this.id = +this.$route.params.id
    this.init()
  }

  init() {
    request
      .getCategoryPostsById({ categories: this.id, page: this.current })
      .then(responsePosts => {
        this.lists = responsePosts.data
      })
  }

  @Watch('$route')
  onRouteChange(route) {
    this.id = route.params.id
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.content {
  .content_wrapper {
    width: 900px;
    margin: 20px auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 4px;

    .title {
      font-size: 18px;
      font-weight: 400;
      padding: 20px;
      border-bottom: solid 1px #f5f5f5;
      transition: background-color 0.5s;
      color: #3273dc;

      &:hover {
        background-color: #f5f5f5;
        transition: background-color 0.5s;
        cursor: pointer;
      }
    }

    .pagination {
      justify-content: flex-end;
      font-size: 18px;
      font-weight: 400;
      padding: 20px;

      & > button:first-child {
        margin-right: 10px;
      }
    }
  }
}
</style>
